<template>
  <div>
    <h2>权限管理</h2>
    <div>
      <el-form
        :inline="true"
        :model="queryParams"
        class="demo-form-inline"
        size="small"
      >
        <span>
          <el-form-item label="角色名称">
            <el-input
              v-model="queryParams.rolename"
              placeholder="请输入要查询的角色名称"
              style="width: 250px"
            ></el-input>
          </el-form-item>
        </span>
        <el-form-item>
          <el-button type="primary" @click="query()">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="opneDialog()"
            ><i class="el-icon-plus"></i>新增</el-button
          >
        </el-form-item>
      </el-form>

      <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-row>
            <h3>角色信息</h3>
            <el-col :span="10">
              <el-form-item label="角色名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="上级角色" :label-width="formLabelWidth">
                <el-input v-model="form.leader" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <h3>权限管理</h3>
            <div style="margin-top: 20px; margin-left: 50px">
              <el-checkbox-group v-model="checkList" size="medium">
                <el-checkbox-button
                  v-for="perm in perms"
                  :label="perm"
                  :key="perm"
                >
                  <span v-if="perm == 'user:select'">查看</span>
                  <span v-if="perm == 'user:insert'">添加</span>
                  <span v-if="perm == 'user:update'">修改</span>
                  <span v-if="perm == 'user:delete'">删除</span>
                  <span v-if="perm == 'user:commit'">提交</span>
                  <span v-if="perm == 'user:import'">导入</span>
                  <span v-if="perm == 'user:export'">导出</span>
                </el-checkbox-button>
              </el-checkbox-group>
            </div>
          </el-row>
          <el-row>
            <h3>权限范围</h3>
            <div style="margin-left: 50px">
              <el-col :span="24">
                <el-radio-group v-model="radio">
                  <el-radio :label="1">自己及下属</el-radio>
                  <el-radio :label="2">本部门</el-radio>
                  <el-radio :label="3">指定部门</el-radio>
                  <el-radio :label="4">全部</el-radio>
                </el-radio-group>
              </el-col>
            </div>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="CloseDialog()">取 消</el-button>
          <el-button type="primary" @click="commit()" :disabled="disabled"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
    <div>
      <el-table
        :data="roleData"
        style="width: 100%"
        :header-cell-style="{ background: '#f2f2f2' }"
      >
        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <el-table-column
          prop="rolename"
          label="角色名称"
          width="180"
        ></el-table-column>
        <el-table-column label="菜单权限" width="300">
          <template slot-scope="scope">
            <template v-for="item in scope.row.permissions">
              <span v-if="item.permname == 'user:select'" :key="item.id"
                >查看,
              </span>
              <span v-if="item.permname == 'user:insert'" :key="item.id"
                >添加,
              </span>
              <span v-if="item.permname == 'user:update'" :key="item.id"
                >修改,
              </span>
              <span v-if="item.permname == 'user:delete'" :key="item.id"
                >删除,
              </span>
              <span v-if="item.permname == 'user:commit'" :key="item.id"
                >提交,
              </span>
              <span v-if="item.permname == 'user:import'" :key="item.id"
                >导入,
              </span>
              <span v-if="item.permname == 'user:export'" :key="item.id"
                >导出,
              </span>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          prop="tel"
          label="权限范围"
          width="180"
        ></el-table-column>
        <el-table-column label="操作" width="270">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleShow(scope.$index, scope.row)"
              ><i class="el-icon-more"></i>查看</el-button
            >
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              ><i class="el-icon-edit"></i>编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              ><i class="el-icon-delete"></i>删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
const permOptions = [
  "user:select",
  "user:insert",
  "user:update",
  "user:delete",
  "user:commit",
  "user:import",
  "user:export",
];
export default {
  created() {
    this.getRoles();
  },
  data() {
    return {
      user: {
        username: "",
        password: "",
      },
      //初始显示
      pageIndex: 1,
      pageSize: 10,
      queryParams: {
        rolename: "",
      },
      pagebeanData: {
        beanList: [],
        totalRecord: 0,
      },
      rid: "",
      title: "添加角色",
      disabled: false,
      roleData: [],
      permData: [],
      dialogFormVisible: false,
      form: {
        name: "",
        leader: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
      checkList: [],
      perms: permOptions,
      radio: 1,
    };
  },
  methods: {
    query() {
      this.$axios
        .get("http://localhost:8800/role/getByName", {
          params: {
            rolename: this.queryParams.rolename,
          },
        })
        .then((resp) => {
          this.roleData = resp.data;
        });
    },
    getRoles() {
      this.$axios.get("http://localhost:8800/role/all").then((resp) => {
        console.log(resp.data);
        this.roleData = resp.data;
      });
    },
    commit() {
      console.log(this.rid);
      if (this.title == "修改角色") {
        this.$axios
          .post("http://localhost:8800/role/updatePermissions", {
            rid: this.rid,
            perms: this.checkList,
          })
          .then((resp) => {
            console.log(resp.data);
            this.dialogFormVisible = false;
            this.getRoles();
          });
      } else if (this.title == "添加角色") {
        this.$axios
          .post("http://localhost:8800/role/add", {
            rolename: this.form.name,
            perms: this.checkList,
          })
          .then((resp) => {
            console.log(resp.data);
            this.dialogFormVisible = false;
            this.getRoles();
          });
      }
    },
    opneDialog() {
      this.title = "添加角色";
      this.dialogFormVisible = true;
    },
    CloseDialog() {
      this.disabled = false;
      this.checkList = [];
      this.dialogFormVisible = false;
    },
    reset() {
      console.log("重置!");
      this.queryParams.rolename = "";
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getAttendance();
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getAttendance();
      this.pageIndex = 1;
    },
    handleShow(index, row) {
      this.title = "查看角色信息";
      this.disabled = true;
      this.$axios
        .get("http://localhost:8800/role/get", {
          params: {
            rid: row.id,
          },
        })
        .then((resp) => {
          this.checkList = resp.data.perms;
          console.log(this.checkList);
          this.dialogFormVisible = true;
        });
    },

    handleEdit(index, row) {
      this.title = "修改角色";
      this.$axios
        .get("http://localhost:8800/role/get", {
          params: {
            rid: row.id,
          },
        })
        .then((resp) => {
          console.log(resp.data);
          this.rid = row.id;
          this.checkList = resp.data.perms;
          console.log(this.checkList);
          this.dialogFormVisible = true;
        });
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm("确认删除该角色吗？", "删除角色", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确认",
        cancelButtonText: "取消",
      })
        .then(() => {
          this.$axios
            .delete("http://localhost:8800/role/del/" + row.id)
            .then((resp) => {
              console.log(resp.data);
              if (resp.data.code == 200) {
                this.$message({
                  message: "角色删除成功！",
                  type: "success",
                });
              } else {
                this.$message.error("角色删除失败！");
              }
              this.getRoles();
            });
        })
        .catch((action) => {
          this.$message({
            type: "info",
            message: "取消删除角色",
          });
        });
    },
  },
};
</script>

<style>
</style>